<template>
  <MeDrawer ref="MeDrawerRef">
    <n-table :single-line="false" size="medium">
      <tbody>
        <tr>
          <th>请求路由</th>
          <td>{{ drawerData.router }}</td>
        </tr>
        <tr>
          <th>操作用户</th>
          <td>{{ drawerData.username }}</td>
        </tr>
        <tr>
          <th>操作名称</th>
          <td>{{ drawerData.service_name }}</td>
        </tr>
        <tr>
          <th>请求方法</th>
          <td>{{ drawerData.method }}</td>
        </tr>
        <tr>
          <th>响应代码</th>
          <td>{{ drawerData.response_code }}</td>
        </tr>
        <tr>
          <th>操作时间</th>
          <td>{{ drawerData.created_at }}</td>
        </tr>
        <tr>
          <th>用户IP</th>
          <td>{{ drawerData.ip }}</td>
        </tr>
        <tr>
          <th>用户地址</th>
          <td>{{ drawerData.ip_location }}</td>
        </tr>
      </tbody>
    </n-table>
    <n-card title="请求数据" size="small" mt-15>
      {{ drawerData.request_data }}
    </n-card>
    <n-card title="响应数据" size="small" mt-15>
      {{ drawerData.response_data }}
    </n-card>
  </MeDrawer>
</template>

<script setup>
import { MeDrawer } from '@/components'

const MeDrawerRef = ref(null)
const drawerData = ref('')

function handleOpen(options = {}) {
  const { row = {}, ...rest } = options
  drawerData.value = row
  MeDrawerRef.value.open({ ...rest })
}

defineExpose({
  handleOpen,
})
</script>
